<script setup>
// ref:获取原生标签dom  获取组件实例this   定义响应式数据

import { onMounted, ref } from 'vue'
import HmForm from './components/HmForm.vue'

/*
获取原生标签dom
 1：定义一个空的响应式数据
    const xxx=ref(不传值/undefined/null)
 2:在原生标签上绑定ref  ref=定义的xxx
     <div ref='xxx'>123</div>
 3:获取dom(就是访问xxx的值),一定要dom渲染后获取
    xxx.value 
    
 获取组件实例this
  1：定义一个空的响应式数据
    const xxx=ref(不传值/undefined/null)
  2:在组件标签上绑定ref
      <son ref='xxx'>123</son>   
  3:获取组件实例(就是访问xxx的值),一定要组件渲染后获取
     xxx.value
  4:需要组件内暴露相应的方法与属性供实例使用
     defineExpose({需要暴露的实例访问的属性或者方法})
*/
const xxxCom = ref()
onMounted(() => {
  console.log(xxxCom.value.num)
})
</script>

<template>
  <div class="app-page">
    <HmForm ref="xxxCom"></HmForm>
  </div>
</template>

<style scoped></style>
